<template>
	<div>
		<div>这是书籍详情页面</div>
		<div class="my-detail">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(item,i) in product.picList" :key="i">
					<van-image :src="APIDomainName + item.md" /></van-swipe-item>
			</van-swipe>
			<van-cell title="书籍编号" :value="product.id" />
			<van-cell title="书籍名称" :value="product.title" />
			<van-cell title="书籍简介" :value="product.name" />
			<van-cell title="书籍作者" :value="product.spec" />
			<van-cell title="出版社" :value="product.disk" />
			<van-cell title="书籍分类" :value="product.cpu" />
			<!-- <van-cell title="内存" :value="product.memory" />
			<van-cell title="显卡" :value="product.videoCard" />
			<van-cell title="分辨率" :value="product.resolution" /> -->
			<van-cell title="上架时间" :value="product.shelfTime" />
			<van-cell title="单价" :value="product.price" />

			<!-- 商品购买区域 -->
			<van-cell>
				<template #default>
					<div class="count-buy">
						<div>购买数量</div>
						<van-stepper v-model="count" integer />
						<van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车
						</van-button>
					</div>
				</template>
			</van-cell>

			<van-button type="primary" size="large" @click="$router.back()">返回</van-button>
		</div>
	</div>
</template>

<script setup>
	import { showToast } from "vant";
	import { ref } from "vue"

	const product = ref({})
	import { useRoute } from "vue-router"
	const id = useRoute().params.id

	// 导入接口
	import { getProductDetailByIdAPI } from "@/api/product.js"
	import { addCartAPI } from "@/api/cart.js";
	// 调用接口
	getProductDetailByIdAPI(id).then(result => {
		product.value = result.data;
	}).catch(error => {
		console.log(error)
	})

	//处理添加购物车
	const count = ref(0)
	const onClickAddShopcart = () => {
		let params = {
			productId: product.value.id,
			count: count.value,
		};

		//2.使用封装后的接口,注意：接口有参数
		addCartAPI(params).then(result => {
			showToast(result.msg);
		}).catch(() => {});
	}
</script>

<style lang="less" scoped>
	.count-buy {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		justify-content: space-between;
	}
</style>